<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link type="text/css" rel="stylesheet" href="../todos1.0/css/one.css">
    
    <title>Document</title>
   

<style type="text/css"> 
  .test.editing .edit {
      display: block;
  }
   
  .test.editing .view {
      display: none;
  }
   
  .test .edit {
      display: none;
  }
  </style> 
</head>

<body>
  <div class="bodys">
	<section class="todoapp">
    <header class="header">
              
      <h1> 
        <div id="test" class="test" :class="{editing: isChecked }" >
          <div class="view">
              <label @dblclick="dbTest()">{{names}}</label>
          </div>
          <input 
              v-myfoucs="isChecked" 
        
              class="edit" 
         
              type="text" 
         
              v-model = "names"
         
              @blur="inputStred()"
             
              @keyup.13="inputStred()"
         
              />
      </div>

      </h1>
 

      <input class="new-todo" placeholder="What needs to be done?" @keyup.enter='addTodo'  v-focus>

    </header>
          
             
              
          <template v-if='todos.length'>
         <!-- This section should be hidden by default and shown when there are todos -->
    <section class="main">

    <input id="toggle-all" class="toggle-all" type="checkbox">

    <label for="toggle-all">Mark all as complete</label>
    
    
      

      <ul class="todo-list">
        <!-- These are here just to show the structure of the list items -->
        <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
                  <li v-for="item of todos" v-bind:class='{completed:item.completed}'>
                      <div class="view">
                          <input class="toggle" type="checkbox" @click="getEndtime()" v-model='item.completed' >
                          <label>{{item.title}}</label>
                          <button class="destroy" @click="deleteItem(item.id)"></button>
                      </div>
                      <input class="edit" value="Create a TodoMVC template">
                  </li>
        
        <!-- <li class="completed ">
          <div class="view">
            <input class="toggle" type="checkbox" checked>
            <label>Taste JavaScript</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template">
        </li>
        
        <li>
          <div class="view">
            <input class="toggle" type="checkbox">
            <label>Buy a unicorn</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Rule the web">
        </li> -->

      </ul>
    </section>
    <!-- This footer should be hidden by default and shown when there are todos -->
      </template>
    <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"><strong>0</strong> item left</span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a class="selected" href="#/">All</a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed">Clear completed</button>
    </footer>
  </section>
</div>


    <div id="app">
        <template>
            <el-container>
                <el-header style="text-align: left; font-size: 12px; padding:0 ;height: auto;">
                    <el-dropdown>
                      <i class="el-icon-notebook-1" style="margin-right: 15px"></i>
                    <span>项目成员统计</span>

                  </el-header>
                <el-table
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                border
                :header-cell-style="{background:'#f4f3f9',color:'#606266'}"
                :span-method="arraySpanMethod"
                style="width: 100%">
                
                <el-table-column
                  label="开始时间"
                  prop="date">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                <el-input
              v-if="scope.row.edit"
              v-model="scope.row.date"
              placeholder="开始时间"
              style="width: 85%"
                >
              
              </el-input>  
              <span style="margin-left: 10px" v-else>{{ scope.row.date }}</span>
                </template>
                </el-table-column>


                <el-table-column
                label="结束时间"
                prop="date2">

                <template slot-scope="scope">
                <i class="el-icon-time"></i>
                  <el-input
                  v-if="scope.row.edit"
                 v-model="scope.row.date"
                 placeholder="结束时间"
                 style="width: 85%"
                   ></el-input>
                  <span style="margin-left: 10px" v-else>{{ scope.row.date2 }}</span>
                </template>
              </el-table-column>
                <el-table-column

                  label="负责人"
                  prop="name">
                </el-table-column>
                <el-table-column
                label="状态"
                prop="Status">
                <template scope="scope">
                  
                    <span v-if="scope.row.uncomplete>0&&scope.row.delay===0&&scope.row.completed>0" style="color: rgb(104, 157, 104)">进行中</span>
                    
                    <span v-else-if="scope.row.delay>0"  style="color: red">已延期</span>
                    
                    <span v-else-if="scope.row.completed>0&&scope.row.delay===0&& scope.row.uncomplete===0" style="color:green">已完成</span>
                    
                    <span v-else-if="scope.row.completed===0&&scope.row.uncomplete===0&&scope.row.delay===0"  style="color: orange">未开始</span>
                    
                    <span v-else style="color:gray"><del>已结束</del></span>
                
                  </template>
  

              </el-table-column>

                <el-table-column
                label="待完成"
                prop="uncomplete"
                align="center">
              </el-table-column>
              <el-table-column
              label="延期任务"
              prop="delay"
              align="center">
            </el-table-column>

            <el-table-column
            label="已完成"
            prop="completed"
            align="center">
          </el-table-column>
        


          <el-table-column
          label="项目开发进度"
          align="center">

          <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              type="line"
              :stroke-width="25"
              :percentage="setItemProgress(scope.row)"
              :status="setItemStatus(scope.row)" 
              :format="setItemText(scope.row)"
            >
        </el-progress>
          </template>




        </el-table-column>
        
                <el-table-column
                  align="right">

                  <template slot="header" slot-scope="scope">
                
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"/>
                  </template>
                
                  <template slot-scope="scope">




            <el-button
            
             @click="confirmData(scope.$index,scope.row)"
             v-if="scope.row.edit"
             type="success"
             size="medium"
            

            >
              <i class="el-icon-check" aria-hidden="true"></i>
            </el-button>
            <div v-else>
              <el-button

                type="primary"
                size="medium"
                @click="handleEdit(scope.$index, scope.row)"

              >
                <i class="el-icon-edit" aria-hidden="true"></i>
              </el-button>



              <el-button

                type="danger"
                size="medium"
                @click="handleDelete(scope.$index, scope.row)"

              >
                <i class="el-icon-delete" aria-hidden="true"></i>
              </el-button>
            </div>

                  </template>
                </el-table-column>
              </el-table>
            </el-container>
           
          </template>
        <template>
            <el-container>
                <el-header style="text-align: left; font-size: 12px; padding:0 ;height: auto;">
                    <el-dropdown>
                      <i class="el-icon-notebook-1" style="margin-right: 15px"></i>
                
                    <span>项目开发进度</span>
                  </el-header>
                <el-table
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                border
                style="width: 100%">
  
                <el-table-column
                  label="Date"
                  prop="date">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="Name"
                  prop="name">
                </el-table-column>
                <el-table-column
                  align="right">
                  <template slot="header" slot-scope="scope">
  
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"/>
                     </template>
  
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-container>
           
          </template>
      </div>
      
</body>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
   
   // 注册一个全局自定义指令 v-focus
  Vue.directive('focus', {


    // 当绑定元素插入到 DOM 中。
    inserted: function (el) {



    // 聚焦元素
    
    el.focus()

    }

  })
  
  let names="王小虎"
  //初始化数据
  
  let todos=[
          {id:1,title:'睡觉',name:'王小虎',completed:true},
          {id:2,title:'美食',name:'王小虎',completed:false},
          {id:3,title:'代码',name:'王小虎',completed:true}
      ]
  
  // 创建根实例
  new Vue({
    el: '.todoapp',
    
     data:{
    

              todos:todos,

              names:names,
            
              isChecked:false,

              nowtime:'',
             },
      created() {
	    this.getItem()
  },
      watch:{
        todos:{
          handler:function(){

            var value=JSON.stringify(this.todos);

            window.localStorage.setItem(this.names,value)

          },
          deep:true
        }
      },

    methods:{

      getNowTime() {
            let dt = new Date()
            var y = dt.getFullYear()
            var mt = (dt.getMonth() + 1).toString().padStart(2,'0')
            var day = dt.getDate().toString().padStart(2,'0')
           
            this.nowtime = y + "-" + mt + "-" + day
            console.log('此刻时间',this.nowtime)

        },

    dbTest(){ 
			this.isChecked= true;
      this.inputStr=this.item;
		},
		inputStred(){
			      this.item=this.inputStr;

            this.isChecked=false;

            this.$options.methods.getItem.bind(this)();
            
		},
             // 添加任务
              addTodo(event){
                this.$options.methods.getNowTime.bind(this)();
              
                  let todoText=event.target.value.trim();
  
                  if(!todoText.length){

                      return  

                  } 
  
          if(this.todos.length==0){
            
            let id=1
            alert(this.nowtime)
            this.todos.push({
                      id:id,

                      title:todoText,

                      completed:false,
                      nowtime:this.nowtime,
                      endtime:''
                  });
  
          }else{
          
            let id=this.todos[this.todos.length-1].id+1;

            this.todos.push({
                      id:id,
                      title:todoText,
                      completed:false,
                      nowtime:this.nowtime,
                  });

          }
                 
                 
                  event.target.value='';
          console.log(this.todos);
              }
        ,deleteItem(id){
        
          this.todos=this.todos.filter(item=>item.id!==id)
          // this.todos=todos.splice(id-1,1);
          console.log(this.todos);
  
        }

        ,getItem(){

          this.todos=JSON.parse(
            window.localStorage.getItem(this.names)||'[]'
          )



        }	
          }
  }
  
  
  
  )


    new Vue({
      el: '#app',
      data: function() {
        return {
        tableData: [{
        
          date: '2016-05-02',
          date2:'2016-07-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          completed:10,
          uncomplete:15,
          delay:15,
          edit:false,
          progress:'15'
        }],
        search:''
      }
    },
    methods: {
        
      handleEdit(index, row) {

        row.edit = true;
        console.log(index, row);


      },

      confirmData(index,row) {
      row.edit = false;
      // console.log(row.edit);
      // console.log(row.price);
      this.$notify({
        title: "Success",
        message: "编辑成功",
        type: "success",
        duration: 2000,
      });
      let data = JSON.parse(JSON.stringify(this.list ? this.list : []));
        data.forEach((element) => {
          element["edit"] = false;
        });
        this.list = data;

    },

      handleDelete(index, row) {
        console.log(index, row);


        this.$confirm("确定删除吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText:"取消"
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
        
          } 
          );
          this.tableData.splice(index, 1);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
       
          });          
        })

 
      
      

      },
      setItemProgress(data) {
				if (data.uncomplete==0&&data.completed>0&&data.delay==0) {
                    return 100
				} else {
					return parseInt((data.completed/ (data.uncomplete+data.completed)).toFixed(1) * 100)
				}
			},
            setItemText(row) {
                var present;
                if (row.uncomplete==0&&row.completed>0&&row.delay==0) {

                 var  present= 100;
				} else {
                    var present = parseInt((row.completed/ (row.uncomplete+row.completed)).toFixed(1) * 100);     
				}
                let sum= row.completed+row.uncomplete;
				return () => {
					return '计划： ' + sum+ '，完成： ' + row.completed+'\xa0 \xa0\xa0 进度为:'+ present+'%'
				}
			},
 
	setItemStatus(data) {
				if (data.completed+data.uncomplete > data.completed) {
					
          return 'exception'

				} else if (data.completed+data.uncomplete === data.completed) {
					
          return 'success'
			
        } else {
					
        
          return 'warning'
				
        }

         },





     arraySpanMethod({ row, column, rowIndex, columnIndex }) {
 
    if(columnIndex == 4){
        return [0,0]
    }else if(
        columnIndex==5
    ){ return [0,0]

    }else if (columnIndex==6){
        return [0,0]
    }else if(columnIndex==7){
        return [1,4]
    }
        }    

        , setColSpan:function() {
      // this.$refs.el-table__header_er
      // console.log(document.getElementsByClassName("el-table__header_er"))
      // 获取表头的所有单元格
      let n = document.getElementsByClassName("el-table__header")[0].rows[0].cells
      console.log(document.getElementsByClassName("el-table__header"))
      // 将第二列表头单元格的colSpan设为2
      n[7].colSpan = 4
      // 将第三列表头单元格的display设为none
      n[4].style.display = 'none'
      n[5].style.display = 'none'
      n[6].style.display = 'none'



    },
    
},
mounted() {
    // 注意一定要保证DOM渲染完成后在进行合并操作，否则会找不到元素
    this.$nextTick(function(){

      this.setColSpan();
      

    })

    },
    
    
   
    })
  </script>
</html>